<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="common/common_head :: commonHeader('样品订单申请')"/>
    <link th:href="@{/static/css/plugins/cropper/cropper.min.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <form class="form-horizontal">
        <div class="row">
            <div class="form-group">
                <div class="col-sm-8" style="margin-left: 16px">
                    <input class="btn btn-primary" type="button" onclick="save()" value="保存">
                    <button class="btn btn-primary" type="button" onclick="Dialog.closeFrame(window.name)">取 消</button>
                </div>
            </div>

            <!-- 显示 隐藏测试 -->
            <ul id="myTab" class="nav nav-tabs">
                <li class="active">
                    <a href="#headerInfo" linkTab="headerInfo" isActive="true" data-toggle="tab"> 订单头信息</a>
                </li>
                <li>
                    <a href="#itemInfo" linkTab="itemInfo" data-toggle="tab"> 行项目信息</a>
                </li>
            </ul>

            <!-- 订单抬头信息 -->
            <div id="headerInfo">
                <div class="ibox float-e-margins" style="padding-top: 20px">
                    <div class="form-group">
                        <label class="col-xs-1 control-label">订单类型：</label>
                        <div class="col-xs-3">
                            <select class="form-control" id="poFlag" name="poFlag" sysDict="CGDDLX"
                                    emptyFirst="false"></select>
                        </div>
                        <label class="col-xs-1 control-label">采购组织</label>
                        <div class="col-xs-3">
                            <select class="form-control" id="purchOrg" name="purchOrg" sysDict="CGZZ"
                                    emptyFirst="false"></select>
                        </div>
                        <label class="col-sm-1 control-label">供应商名称：</label>
                        <input name="vendorId" id="vendorId" type="hidden"/>
                        <div class="col-sm-3">
                            <input type="text" name="companyName" id="companyName" class="form-control"
                                   data-toggle='modal' data-target='#myModalVendor'/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-1 control-label">采购组：</label>
                        <div class="col-sm-3">
                            <select class="form-control" id="purchGroup" name="purchGroup" sysDict="CGZ"
                                    emptyFirst="false"></select>
                        </div>
                        <label class="col-sm-1 control-label">付款条件：</label>
                        <div class="col-sm-3">
                            <select class="form-control" id="payCondition" name="payCondition" sysDict="FKTJ"
                                    emptyFirst="false"  ></select>
                        </div>
                        <label class="col-sm-1 control-label">货币：</label>
                        <div class="col-sm-3">
                            <select class="form-control" id="currencyCode" name="currencyCode" sysDict="BZ"
                                    emptyFirst="false"></select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-1 control-label">采购公司：</label>
                        <div class="col-sm-3">
                            <select class="form-control" id="companyCode" name="companyCode" sysDict="GC"
                                    emptyFirst="false"></select>
                        </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 行项目信息 -->
            <div id="itemInfo" style="display:none;">
                <div class="ibox float-e-margins">
                    <div class="table-responsive">
                        <input style="margin-left: 20px" class="btn btn-primary" type="button" onclick="addtr()"
                               value="新增">
                        <table class="table table-bordered text-nowrap" id="itemsTable">
                            <thead>
                            <tr>
                                <th>物料号</th>
                                <th>物料描述</th>
                                <th>工厂</th>
                                <th>库存地点</th>
                                <th>含税单价</th>
                                <th>最小购买量</th>
                                <th>数量</th>
                                <th>计量单位</th>
                                <th>税码</th>
                                <th>交期</th>
                                <th>备注</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- Modal Vendor -->
<div class="modal fade" id="myModalVendor" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document" style="width:70%">
        <div class="modal-content" style="height:700px">
            <form id="vendorForm" th:action="@{/vendor/findSimplePage}" class="form-inline">
                <div class="modal-header" style="height:10%">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">供应商选择</h4>
                </div>
                <div class="modal-body">
                    <div style="height: 30px">
                        <ul>
                            <li class="col-sm-3" style="width: 33%">
                                <label>供应商编码：</label>
                                <input name=srmCode type="text" id="srmCode" class="form-control" placeholder="供应商编码">
                            </li>
                            <li class="col-sm-3" style="width: 33%">
                                <label>供应商名称：</label>
                                <input name="vendorName" type="text" id="vendorName" class="form-control"
                                       placeholder="供应商名称">
                            </li>
                            <li class="col-sm-3" style="width: 33%">
                                <button id="vendorSearchBtn" type="button" class="btn btn-primary btn-rounded btn-sm"><i
                                        class="fa fa-search"></i>&nbsp;搜索
                                </button>
                                <button class="btn btn-warning btn-rounded btn-sm" type="reset"><i
                                        class="fa fa-eraser"></i>&nbsp;重置
                                </button>
                            </li>
                        </ul>
                    </div>
                    <table id="vendor" class="table table-bordered"></table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="checkVendor()">确定</button>
                </div>
            </form>

        </div>
    </div>
</div>

<!--引入公共js-->
<div th:include="common/onload_js :: onloadJS"></div>
<!-- Chosen -->
<script th:src="@{/static/js/plugins/chosen/chosen.jquery.js}"></script>
<script type="text/javascript">
    $(function () {
        initTabBar("myTab");//初始化Tab页
        parseInputDictValToText();//转化数据字典值
        loadVendorList();
        //初始化所有字典表数据
        initDictDataSel();
    });


    //供应商模态框选中确认
    function checkVendor() {
        var rows = $("#vendor").bootstrapTable('getSelections');
        //判断是否选中行
        if (!rows || rows.length == 0) {
            Dialog.alert("请先选中一行！");
            return;
        }
        var row = rows[0];
        $("#vendorId").val(row["pkId"]);
        $("#companyName").val(row["vendorName"]);
        $("#payCondition").val(row["payCondition"]);
        $('#myModalVendor').modal('hide');
    }

    //模态框隐藏时，清除所有选中项
    $('#myModalVendor').on('hidden.bs.modal', function () {
        $("#vendor").bootstrapTable('uncheckAll');
    });



    //加载供应商列表
    function loadVendorList() {
        Searcher.createBS('#vendor',
            [
                {radio: true},
                {title: "供应商编码", field: "sapCode"},
                {title: "供应商名称", field: "vendorName"},
                {title: "付款条件", field: "payCondition"}
            ], {pageList: [10], pageSize: 10, showColumns: false, showRefresh: false}
        );
    }


    /**
     ** 保存
     */
    function save() {
        var data = {};
        var heads=[];
        var items = [];
        var headEntity = {};
        var divs = $("#headerInfo").find("input, select");
        var trs = $("#itemsTable tbody").find("tr");
        divs.each(function (idx,it) {
            headEntity[$(it).attr("name")]= $(it).val();
        });
        heads.push(headEntity);
        trs.each(function (index, tr) {
            var itemEntity = {};
            var its = $(tr).find("input, select");
            its.each(function (idx, it) {//循环遍历，把item的内容塞进一个item对象，然后加到数组里
                itemEntity[$(it).attr("name")] = $(it).val();
                });
            console.info(itemEntity);
            items.push(itemEntity);
            });
        data["items"] = items;
        data["heads"]=heads;
        if(trs.length<=0){
            Dialog.errorMsg("请先添加行项目数据!");
            return;
        }
        $.ajax({
            type: "get",
            url: ctxPath+"/samplePoController/add",
            data: {"datalist": JSON.stringify(data)},
            dataType: "json",
            success: function (res) {
                if(res!=null&&res!=''){
                    console.info(res.result)
                    alert("样品订单号为:"+res.result)
                }else{
                    Dialog.errorMsg("生成失败!");
                }

            }
        }, {"loadingMsg": "正在往服务器提交数据……", contentType: 'application/json;charsetset=utf-8'});
    }

    var index = 0;

    function addtr() {
        var trCode = "<tr>";
        trCode += "<td width='110px'><input style='width:95%' class='materialCode' name='materialCode' /></td>";
        trCode += "<td width='150px'><input style='width:95%' class='materialDesc'  name='materialDesc'/></td>";
        trCode +="<td width='150px'><select class='form-control' class='factory' name='factory' dictType='WUZ' emptyFirst='false'></select></td>";
        trCode +="<td width='150px'><select class='form-control' class='factory' name='factory' dictType='GC' emptyFirst='false'></select></td>";
        trCode +="<td width='150px'><select class='form-control' class='storageLocation' name='storageLocation' dictType='KCDD' emptyFirst='false'></select></td>";
        trCode +="<td width='110px'><input style='width:95%' class='poPrice' type='text' name='poPrice'/></td>";
        trCode +="<td width='110px'><input style='width:95%' class='priceUnit' type='text' name='priceUnit' value='1'/></td>";
        trCode +="<td width='110px'><input style='width:95%' type='text' name='poCount'/></td>";
        trCode +="<td width='110px'><select class='form-control' class='poUnit' name='poUnit' dictType='JLDW' emptyFirst='false'></select></td>";
        trCode +="<td width='200px'><select class='form-control' class='taxCode' name='taxCode' dictType='SDM' emptyFirst='false'></select></td>";
        trCode +="<td width='110px'><input style='width:95%' class='deliveryDate' name='deliveryDate' type='text' /></td>";
        trCode +=" <td width='110px'><input style='width:95%' type='text' name='remark'/></td>";
        trCode +="<td width='110px'><button class='btn btn-danger' type='button'>删除</button></td>";
        trCode += "</tr>";

        $("#itemsTable tbody").append(trCode);
        laydate.render({elem: '.deliveryDate'});
        //初始化所有字典表数据
        fillDictDataSel();
    }
    //绑定删除按钮事件
    $("#itemsTable").on("click",".btn-danger",function () {
        $(this).parent().parent().remove();
    });
    //绑定物料光标事件
    $("#itemsTable").on("blur",".materialCode",function () {
        var materialCode = $(this).val();
        var materialDesc=null;
        if(materialCode!=null&&materialCode!=""){
            Page.ajaxPOST(ctxPath + "/material/list", {"materialCode":materialCode}, function (o) {
                if(o.result.list.length!=0){
                    materialDesc=o.result.list[0].materialDesc
                }else{
                    Dialog.errorMsg("没有此物料数据");
                }
            }, {
                async: false
            });
            if(materialDesc!=null&&materialDesc!=""){
                $(this).parent().parent().find('.materialDesc').val(materialDesc);
            }
        }
    });

</script>

</body>
</html>